<template>
    <ph-action-bar class="ph-dt-footer ph-dt-mfooter" v-if="isMobile">
        <div class="ph-left" v-if="umode==Mode.datetime">
            <ph-button :type="theme" :mini="true" v-if="mode!=Mode.time" @click="$emit('time-navigate')">{{langs.timeSetting}}</ph-button>
            <span>{{dpreview[0]}}</span>
        </div>
        <div class="ph-right">
            <span>{{dpreview[1]}}</span>
            <div>
                <ph-button v-if="clear" :type="theme" :mini="true" @click="$emit('clear')">{{langs.clear}}</ph-button>
                <ph-button :disabled="disabled" :type="theme" :mini="true" @click="!disabled&&$emit('done')">{{langs.done}}</ph-button>
            </div>
        </div>
    </ph-action-bar>
    <ph-action-bar class="ph-dt-footer" v-else>
        <div class="ph-left" v-if="umode==Mode.datetime">
            <ph-button :type="theme" :mini="true" v-if="mode!=Mode.time" @click="$emit('time-navigate')">{{langs.timeSetting}}</ph-button>
        </div>
        <div class="ph-center">
            <div class="ph-date-preview">{{dpreview.join(" ~ ")}}</div>
        </div>
        <div class="ph-right">
            <ph-button v-if="clear" :type="theme" :mini="true" @click="$emit('clear')">{{langs.clear}}</ph-button>
            <ph-button :disabled="disabled" :type="theme" :mini="true" @click="!disabled&&$emit('done')">{{langs.done}}</ph-button>
        </div>
    </ph-action-bar>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, toRefs } from 'vue'
import {Mode} from './config'
import {datefmt,date2number,dgmap,kmap} from '../../shared/datetime'
import {PhActionBar,PhButton} from '../base'
export default defineComponent({
    components:{PhActionBar,PhButton},
    props:{
        theme:{type:String},
        langs:{type:Object as PropType<Record<string,unknown>>},
        mode:{type:Number},
        umode:{type:Number},
        vDo:{type:Object as PropType<{[k:string]:number}>,default:()=>({})},
        sDo:{type:Object as PropType<{[k:string]:number}>,default:()=>({})},
        eDo:{type:Object as PropType<{[k:string]:number}>,default:()=>({})},
        min:{type:[Object,Boolean]},
        max:{type:[Object,Boolean]},
        format:{type:String,default:""},
        clear:{type:Boolean,default:true},
        now:{type:Boolean,default:true},
        isMobile:Boolean
    },
    setup(props){
        const {min,max,vDo,sDo,eDo} = toRefs(props)
        const dpreview = computed(()=>{
            return [datefmt(sDo.value,props.format),datefmt(eDo.value,props.format)]
        })
        const isDisabled = (c:number,s:number,e:number)=>{
            if(!c)return false
            if(s&&e)return c<s||c>e
            if(s)return c<s
            if(e)return c>e
            return false
        }
        const disabled = computed(()=>{
            const fmtks = props.format.match(/([yMdhms]+)/g)||[]
            const kseq = Object.keys(kmap).filter(k=>fmtks.includes(k))
            const s = date2number(kseq.map(k=>sDo.value[k]))
            const e = date2number(kseq.map(k=>eDo.value[k]))
            const mi = min.value?date2number(kseq.map(k=>(min.value as any)[k])):0
            const ma = max.value?date2number(kseq.map(k=>(max.value as any)[k])):0
            return isDisabled(s,mi,ma)||isDisabled(e,mi,ma)||s>e
        })
        return {Mode,dpreview,disabled}
    }
})
</script>
<style lang="scss">
.ph-dt-mfooter{
    width:200%;
    transition: transform .3s ease;
    transform: translateX(0);
    backface-visibility: hidden;
    .ph-left,
    .ph-right{
        display: flex;
        justify-content: space-between;
        width: calc(50% - var(--ph-15));
        flex:0 0 auto!important;
    }
}
</style>